<template>
	<view class="content">
		<!-- <view class="top">
			<view class="topItem" :class="[topIndex == index ?'top_active':'']" v-for="(item,index) in topList" :key="index"
			 @tap="topClick(index)">{{item}}</view>
		</view>
		<view style="height: 80upx; width: 100%;"></view> -->
		<!-- 课包列表 -->
		<view class="litsitem" v-for="(item,index) in datas" :key="index" @tap="detail(item.unid)">
			<view class="itemtop">{{item.package_name}}</view>
			<view class="itembootom">
				<view class="left">
					<view class="label" v-show="item.state == 1">预</view>
					<view class="num">章节数：{{item.package_num}}</view>
					<view class="num">资源数：{{item.resource_num}}</view>
				</view>
				<view class="right">
					<view class="money">¥{{item.price}}</view>
					<view class="rnum">已售{{item.sales_num}}人</view>
				</view>
			</view>
			<view class="btns">
				<!-- <view class="btn">删除</view> -->
				<view class="btn btn-release" @tap.stop="release(item.unid,item.package_name)">发布学包</view>
			</view>
		</view>
		<uni-load-more v-if="datas.length >= 6" :status="status" :content-text="contentText" />
		<!-- 弹窗 -->
		<view class="pop-up" catchtouchmove="false" :class="{'show':isShow}">
			<view class="pop-content">
				<view class="pop-title">
					<view class="pop-btn" @click="close(1)">确认</view>
					<view class="pop-name">
						<input class="head_input" v-model="name" confirm-type="search" placeholder-style="background-position: 20% 50%; background-size:5%; background-repeat:no-repeat; background-image: url('../../static/image/search.png');"
						 placeholder="请输入名称" /></view>
					<i class="iconfont iconguanbi" @click="close(0)"></i>
				</view>
				<view class="list">
					<view class="list-name">科目</view>
					<view class="list-content">
						<view class="item" :class="{active:item.sid==sid}" v-for="(item,kindex) in course" :key="kindex" @click="selectsubject(item.sid)">{{item.subject_name}}</view>
					</view>
				</view>
				<view class="list">
					<view class="list-name">年级</view>
					<view class="list-content">
						<view class="item" :class="{active:grade==(gindex+1)}" v-for="(item,gindex) in glist" :key="gindex" @click="selectgrade(gindex)">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				topList: ['已购买', '已创建'],
				topIndex: 0,
				glist: util.getStage(997),
				course: [],
				isShow: true,
				grade: '',
				sid: '',
				name: '',
				datas: [],
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				package_type: '',
				section_id: ''
			}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onNavigationBarButtonTap(e) {
			this.isShow = !this.isShow;
		},
		onLoad(e) {
			this.section_id = e.section_id
			this.getsubject();
			this.getList();
		},
		methods: {
			// 获取列表
			getList() {
				var data = {
					limit: 8,
					page: this.page,
					package_type: 2
				}
				if (this.sid) {
					data.subject_id = this.sid
				}
				if (this.grade) {
					data.grade_id = this.grade
				}
				if (this.name) {
					data.package_name = this.name
				}
				if (this.topIndex == 0) {
					var url = 'moblie/package/order/infos'
				} else if (this.topIndex == 1) {
					var url = 'moblie/package/create/infos'
				}
				this.$papi.apiPost(url, data).then(res => {
					if (res.data.code == 200 && res.data.data.list.length > 0) {
						var lists = res.data.data.list;
						for (var i = 0; i < lists.length > 0; i++) {
							lists[i].state = 0;
							var time = Date.parse(new Date()) / 1000; //获取当前时间
							lists[i].time = new Date(lists[i].end_date).getTime() / 1000; //转为时间戳
							if (lists[i].time > time) {
								lists[i].state = 1;
							}
						}
						this.datas = this.reload ? lists : this.datas.concat(lists);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.datas = [];
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						} else {
							this.status = "noMore";
						}
					}
				})
			},
			// 选项卡切换
			topClick(index) {
				this.topIndex = index;
				this.page = 1;
				this.reload = true;
				this.status = 'more';
				this.datas = [];
				this.getList();
			},
			// 获取科目列表
			getsubject: function() {
				// 请求'同步科目列表'2.0
				this.$zapi.apiPost('user/subject.Lists/subjectLists', {
					textbook: this.textbook
				}).then(res => {
					this.course = res.data.data
				})
			},
			// 选择科目
			selectsubject: function(sid) {
				if (this.sid == sid) {
					this.sid = '';
				} else {
					this.sid = sid;
				}
			},
			// 选择年级
			selectgrade: function(gindex) {
				if (this.grade == gindex + 1) {
					this.grade = "";
				} else {
					this.grade = gindex + 1;
				}
			},
			// 关闭 && 确认
			close(state) {
				if (state == 0) {
					this.sid = '';
					this.name = '';
					this.grade = "";
				}
				this.isShow = !this.isShow;
				this.reload = true;
				this.getList();
			},
			// 查询详情
			detail(unid) {
				var url = './packagedetail?package_id=' + unid + '&isSee=1'
				if (this.section_id) {
					url = './packagedetail?package_id=' + unid + '&isSee=1' + '&section_id=' + this.section_id
				}
				uni.redirectTo({
					url: url
				})
			},
			// 发布学包
			release(unid, package_name) {
				uni.navigateTo({
					url: 'release?unid=' + unid + '&package_name=' + package_name
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: rgba(250, 250, 250, 1);
	}

	.show {
		display: none;
	}

	/* 顶部选项卡 */
	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: rgba(255, 255, 255, 1);
	}

	.topItem {
		color: #333333;
		font-size: 34upx;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.top_active {
		color: #FF9900;
	}

	.top_active:after {
		content: '';
		width: 80upx;
		height: 4upx;
		background: #FF9900;
		position: relative;
		top: 10upx;
	}

	.line1 {
		width: 96%;
		margin: auto;
		margin-top: 180upx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.nav_item {
		width: 30%;
		margin: 40upx 1.5%;
		height: 180upx;
	}

	.litsitem {
		width: 610upx;
		margin: auto;
		border-radius: 20upx;
		background: #FFFFFF;
		padding: 0 40upx;
		margin-top: 40upx;

		.itemtop {
			font-size: 38upx;
			color: #333333;
			font-weight: 500;
			line-height: 120upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.itembootom {
			margin: auto;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				justify-content: flex-start;

				.label {
					width: 72upx;
					height: 40upx;
					background: rgba(255, 153, 0, 1);
					border-radius: 20upx;
					margin-right: 20upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 40upx;
				}

				.num {
					height: 40upx;
					line-height: 40upx;
					color: #999999;
					font-size: 26upx;
					margin-right: 15upx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;

				.money {
					font-size: 44upx;
					color: #333333;
					font-weight: 500;
					line-height: 60upx;
				}

				.rnum {
					color: #999999;
					font-size: 24upx;
				}
			}
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 40upx 0;

			.btn {
				color: #FFFFFF;
				line-height: 1;
				padding: 14upx 36upx;
				border-radius: 30upx;
				background-color: #FF7171;
				margin-left: 20upx;
			}

			.btn-release {
				background-color: #FF9900;
			}
		}
	}

	.pop-up {

		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);

		.pop-content {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			border-radius: 20upx 20upx 0upx 0upx;

			.pop-title {
				width: 92%;
				height: 100upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: auto;

				.pop-btn {
					width: 120upx;
					height: 60upx;
					border-radius: 10upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					background: #FF9900;
				}

				.pop-name {
					width: 70%;
				}

				.head_input {
					background: #f3f3f3;
					height: 60upx;
					line-height: 60upx;
					border-radius: 12upx;
					text-align: center;
					margin-bottom: 0;
				}

				i {
					font-size: 38upx;
				}
			}

			.list {
				display: flex;
				flex-direction: column;
				width: 92%;
				margin: auto;
				margin-top: 20upx;

				.list-name {
					font-size: 36upx;
					font-weight: 500;
				}

				.list-content {
					display: flex;
					width: 100%;
					justify-content: flex-start;
					flex-wrap: wrap;

					.active {
						background-color: #FF9900 !important;
						color: #FFFFFF;
					}

					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 20upx;
						margin-right: 5%;
						width: 30%;
						height: 80upx;
						border-radius: 18upx;
						background-color: #EFEFEF;
					}

					.item:nth-child(3n) {
						margin-right: 0upx !important;
					}
				}

			}

		}
	}
</style>
